<script setup lang="ts">
    import { reactive, ref, toRefs } from 'vue';
    import { typeEnum } from '@/enums'
    import { User, Message, Lock } from '@element-plus/icons-vue'

    // 属性
    let props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    });
    let { visible } = toRefs(props)

    // 注册信息
    const registerForm = reactive({
        nickName: '',
        email: '',
        code: '',
        passWord: ''
    });

    // 发送验证码文本内容
    const content = ref("点击发送");

    // 绑定class样式
    const classObj = reactive({
        // 验证码点击按钮样式
        sendBtn: true,
        // 禁止点击按钮样式
        banBtn: false
    }); 

    const rules = reactive({
        nickName: [
            { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { required: true, pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
        passWord: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { required: true, pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '密码必须包含字母和数字，且在6~18位之间', trigger: 'blur' }
        ],
        code: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
    });
</script>

<template>
    <div class="register-wrap-box" v-show="visible">
        <el-form :model="registerForm" :rules="rules" class="from-box">
            <div class="nickname-label">
                <el-form-item prop="nickName">
                    <el-input size="large" placeholder="请输入昵称" :prefix-icon="User" v-model="registerForm.nickName"></el-input>
                </el-form-item>
            </div>
            <div class="email-label">
                <el-form-item prop="email">
                    <el-input size="large" placeholder="请输入电子邮箱" :prefix-icon="Message" v-model="registerForm.email"></el-input>
                </el-form-item>
            </div>
            <div class="code-label">
                <el-form-item prop="code">
                    <el-input
                        size="large"
                        placeholder="请输入验证码"
                        maxlength='4'
                        v-model="registerForm.code" autocomplete="off">
                        <template #prefix>
                            <svg-icon href="#icon-code" width="14px" height="14px" fill="#a8abb2"></svg-icon>
                        </template>
                        <template #suffix>
                            <el-button :class="classObj" link>{{ content }}</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </div>
            <div class="passWord-label">
                <el-form-item prop="passWord">
                    <el-input size="large" placeholder="请输入密码" :prefix-icon="Lock" v-model="registerForm.passWord" show-password autocomplete="off"></el-input>
                </el-form-item>
            </div>
            <div class="btn-box">
                <el-button size="large" type="primary" style="width: 100%">注  册</el-button>
                <div class="info clearfix">
                    <p class="info-item fl">已有账号？<span class="loginBtn" @click="$emit('switch', typeEnum.LOGIN)">登录</span></p>
                </div>
            </div>
        </el-form>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />